.height-40{
    height:40px;
}

@media (min-width: 0px) {
    .main {
        width: 100%;
    }

    .head {
        width: 80%;
        margin: 0 auto;
    }

    .head-img {
        width: 250px;
        margin: 0 auto;
        position: relative;
    }

    .frame {
        width: 200px;
        margin: 0 20px;
    }

    .img {
        width: 65px;
        position: absolute;
        left: 40px;
        top: 17px;
        border-radius: 50%;
    }

    .head-text {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 14px;
        font-weight: bold;
    }

    .juli {
        position: relative;
    }

    .house {
        width: 47px;
        float: right;
    }

    .ticket {
        width: 63px;
    }

    .energy {
        height: 20px;
        background: white;
        position: absolute;
        border: 3px solid black;
        left: 63px;
        top: 15px;
    }

    .radius {
        border-radius: 25px;
    }

    .value {
        height: 100%;
        background: red;
    }

    .body-text {
        text-align: center;
        color: white;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        top: -15px;
    }

}

@media (min-width: 600px) {
   /* .main {
        width: 100%;
    }

    .head {
        width: 50%;
        margin: 0 auto;
    }

    .head-img {
        width: 250px;
        margin: 0 auto;
        position: relative;
    }

    .frame {
        width: 200px;
        margin: 0 20px;
    }

    .img {
        width: 65px;
        position: absolute;
        left: 40px;
        top: 17px;
        border-radius: 50%;
    }

    .head-text {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 16px;
        font-weight: bold;
    }

    .juli {
        position: relative;
    }

    .house {
        width: 77px;
        float: right;
    }

    .ticket {
        width: 93px;
    }

    .energy {
        height: 50px;
        background: white;
        position: absolute;
        border: 6px solid black;
        left: 93px;
        top: 15px;
    }

    .radius {
        border-radius: 25px;
    }

    .value {
        height: 100%;
        background: red;
    }

    .body-text {
        text-align: center;
        color: white;
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        top: -20px;
    }*/
}

/*

!* 中等屏幕（桌面显示器，大于等于 992px） *!
@media (min-width: 800px) {
    .main{
        width: 60%;
        height:200px;
        margin:0 auto;
    }
}

!* 大屏幕（大桌面显示器，大于等于 1200px） *!
@media (min-width: 1200px) {
    .main{
        width: 40%;
        height:200px;
        margin:0 auto;
    }

    .img{
        width:50px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 15px;
        display: inline-block;
        height: auto;
        line-height: 1.42857;
        max-width: 100%;
        padding: 4px;
        transition: all 0.2s ease-in-out 0s;
    }

    .real{
        width:50px;
        border-radius: 50%;
        padding:4px;
        background:#FCBD03;
    }
}*/



